<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=q, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>订机票</title>
    <style>
        .divhead{
            width: 100%;
            height: 30px;
            text-align:center;
        }
        a{
            text-decoration:none;
            color: #000;
        }
        .divL1{
            width: 100%;
            height: 300px;
            float: left;
            padding-left: 125px;
            padding-top: 50px;
            background-image:url("");
            background-size: 100% 100%;
        }
        .divL11{
            margin: 0px;
            width: 1250px;
            height: 300px;
            padding-left: 50px;
        }
        .divL111{
            height: 30px;
            width: 400px;
        }
        span{
            position: relative;
            left: 20px;
            bottom: 10px;
        }

    </style>
</head>
<body>
    <div class = "divhead">
     <span style = "float: left; padding-left: 150px; padding-top: 5px;">今天是2013年6月5日🌤晴 22℃~16℃</span>
        <span style = "float: right;padding-right: 100px; padding-top: 5px;"><a href = "dsadasd" style="background-color: darkorange;">登录</a> &nbsp <a href = "dsadasd">免费注册</a> &nbsp|&nbsp<a href = "dsadasd">手机客户端下载</a>&nbsp|&nbsp<a href = "dsadasd">设为首页</a>&nbsp|&nbsp<a href = "dsadasd">加入收藏夹</a></span>
    </div>
    <div class = "divL1">
        <div class = "divL11">
            <div style=" width: 100%; height: 30px; float: left; padding-left: 20px; padding-top: 10px; font-size: 20px;">机票预订</div>
            <div style=" float: left; background-color: dimgray;width: 1200px;height: 5px;"></div>
            <div style="width: 500px;height: 30px;float: left;"></div>
            <div style = "float: left;" class = "divL111"><input type = "radio">选择---><input type = "radio">预定---><input type = "radio">核对---><input type = "radio">支付---<input type = "radio">完成
            </div>
            <div style="width: 900px;height: 30px;background-color:cornflowerblue;float: left;">&nbsp|&nbsp航班信息</div>
            <div style="width: 60px;height: 80px;background-color:crimson;position: relative; top:105px">
            </div>
            <div style="width: 210px;height: 80px;position: relative; left: 60px; top: 25px;"><span >海南航空 KU7718<br>机型 738 &nbsp&nbsp<a href = " asdasd"> 经停</a></span></div>
            <div style="width: 210px;height: 80px;position: relative; left: 270px;bottom: 55px;"><span style=" position: relative;left: 20px;top: 15px;"><a href = "asd">[修改航班]</a>&nbsp<a href = "sda">[遇 改 签]</a><br><a>[修改舱位]</a></span></div>
            <div style="width: 210px;height: 80px;position:absolute;  left: 663px; top: 193px;"><span style=" position: relative;left: 20px;top: 15px;">2013年06月17日&nbsp 11:00<br>2013年06月17日&nbsp 15:40</span></div>
            <div style="width: 210px;height: 80px;position:absolute;  left: 873px; top: 193px;"><span style=" position: relative;left: 20px;top: 15px;">周水子国际机场--起飞<br>宝安国际机场--到达</span></div>
            <div style="width: 900px;height: 4px;position:absolute;  left: 183px; top: 273px;background-color:darkturquoise"></div>
            <div style="width: 900px;height: 58px;position:absolute;  left: 183px; top: 277px;"><span style=" position: relative;left: 20px;top: 15px;">总价:¥2200（含税费）&nbsp&nbsp人数:1人 <a herf = "asda">机票明细</a></span></div>
            <div style="width: 900px;height: 54px;position:absolute;  left: 183px; top: 335px;background-color:darkturquoise"><p style=" position: relative;left: 40px;top: 15px;"><h2 tyle=" position: relative;left: 40px;top: 15px;">乘客信息</h2><h4 style=" position: relative;left: 120px;top: -45px;color:deeppink;">请准确填写乘客信息（姓名、证件号码）,以免在办理登机手续时发生问题</h4></p></div>
            <div style="width: 250px;height: 25px; background-color: darkcyan;position: absolute;left: 1100px;top:133px;">❤贴心提示</div>
            <div style="width: 250px;height: 175px;position:absolute;left:1100px;top:158px;border: 1px solid blue;"><ul><li>航班查询</li>
            <li>机票价格</li>
            <li>支付方式</li>
            <li>配送方式</li>
            <li>行程单/报销凭证/发票</li>
            <li>订单修改与取消</li>
            <li>乘机常识</li>
            </ul></div>

        </div>
    </div>
    <div id='customer' style = "position: relative; top: 20px; left: 150px;">
        <span style="font-size: 13px">在常用姓名中搜索:</span>&nbsp;<input type="text" style="width: 170px ;position: relative ; left: 20px; top: -10px;" placeholder="请输入姓名">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span style="font-size: 13px">
                <input type="checkbox" id="check1" onclick="add_customer(this)" value="刘某某"   />刘某某&nbsp;
                <input type="checkbox" id="check2" onclick="add_customer(this)" value="张某某"  />张某某&nbsp;
                <input type="checkbox" id="check3" onclick="add_customer(this)" value="王某某"  />王某某&nbsp;
                <input type="checkbox" id="check4" onclick="add_customer(this)" value="李某某"  />李某某&nbsp;&nbsp;&nbsp;&nbsp;
                
                <input type="button" id="" value="添加" onclick="add_customer()"/>
                
                <script>
                    var num = 1;
                    
                    function add_customer(checkbox) {
                        
                        if((event.target.id != '' && checkbox.checked == true) || (event.target.id=='')) {
                            
                        
                        var node = document.getElementById("customer_message");
                        
                        var fieldset = document.createElement("fieldset");
                        fieldset.setAttribute('id', 'fieldset' + String(num));
                
                        var legend = document.createElement("legend");
                        
                        var labels = new Array('*购票类型: ', '*姓  名: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;', '*证件类型: ', '*证件号码: ');
                                        
                        legend.innerHTML = "第" + num++ + "位乘客";
                        fieldset.appendChild(legend);
                        
                        for(var i=0; i<4; i++) {
                            var label = document.createElement("label");
                            var text = document.createElement("input");
                            var selects = document.createElement("select");
                            var br = document.createElement("br");
                            
                            label.innerHTML = labels[i];					
                            text.setAttribute('type', 'text');
                            
                            fieldset.appendChild(label);
                            
                            if(event.target.id != '') {
                                if(i == 1) {
                                    var name = document.getElementById(event.target.id).value;
                                    text.setAttribute('value', name);
                                }
                                
                            
                            }
                            
                            if(i == 0) {
                                var option1 = document.createElement('option');
                                var option2 = document.createElement('option');
                                var option3 = document.createElement('option');
                                
                                option1.innerHTML = '学生票';
                                option2.innerHTML = '成人票';
                                option3.innerHTML = '儿童票';
                                
                                selects.appendChild(option1);
                                selects.appendChild(option2);
                                selects.appendChild(option3);							
                                
                                fieldset.appendChild(selects);
                            }
                            else if(i == 2) {
                                var option1 = document.createElement('option');
                                var option2 = document.createElement('option');
                                var option3 = document.createElement('option');
                                
                                option1.innerHTML = '护照';
                                option2.innerHTML = '身份证';
                                option3.innerHTML = '中国绿卡';
                                
                                selects.appendChild(option1);
                                selects.appendChild(option2);
                                selects.appendChild(option3);							
                                
                                fieldset.appendChild(selects);			
                            }
                            else {
                                fieldset.appendChild(text);
                            }
                            fieldset.appendChild(br);
                            
                        }		
                        var button = document.createElement("input");
                        button.setAttribute('type','button');
                        button.setAttribute('value','删除');
                        button.setAttribute('id',String(num-1));
                        button.setAttribute('onclick','delete_customer()');
                        fieldset.appendChild(button);
                        
                        node.appendChild(fieldset);
                        }
                    }
                    function delete_customer() {
                        var node = document.getElementById("customer_message");
                        var child = document.getElementById('fieldset' + String(event.target.id));
                        num = num - 1;
                        node.removeChild(child);
                    }
                </script>
                
            </span>
        </div>
        
        <div id='customer_message' style = "width: 500px; position: relative; left: 180px;top: 10px; ">
            
        </div>
        <h3 style="position: relative; left: 180px;">联系信息</h3>
        <div id="zhong38"><span style="font-size: 13px ;position: relative; left: 180px;">*联&nbsp;&nbsp;系&nbsp;&nbsp;人：<input type="text" style="width: 180px" id="msg1" onBlur="bluree1(this)"><span id="msg11"></span><br><br>*手机号码：<input type="text" style="width:180px" id="msg2" onBlur="bluree2()"><span id="msg21"></span><br><br>&nbsp;&nbsp;联系电话：<input type="text" style="width: 45px" placeholder="区号" id="msg3" onBlur="bluree3()">&nbsp;<input type="text" style="width: 75px" placeholder="电话号码" id="msg4" onBlur="bluree4()">&nbsp;<input type="text" style="width: 45px" placeholder="分机" id="msg5" onBlur="bluree5()"><span id="msg31"></span><span id="msg41"></span><span id="msg51"></span><br><br>&nbsp;&nbsp;传真号码：<input type="text" style="width: 45px" placeholder="区号" id="msg7" onBlur="bluree7()">&nbsp;<input type="text" style="width: 75px" placeholder="电话号码" id="msg8" onBlur="bluree8()">&nbsp;<input type="text" style="width: 45px" placeholder="分机" id="msg9" onBlur="bluree9()"><span id="msg71"></span><span id="msg81"></span><span id="msg91"></span><br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;E-mail：<input type="text" style="width:180px" id="msg6" onBlur="bluree6()"><span id="msg61"></span><br><br>&nbsp;&nbsp;联系地址：<input type="text" style="width:180px"></span></div>
        <center><input type="button" value='上一步' />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="下一步" id="button" onclick="next()"/></center>
        <script>
            function bluree1(){
                var msg1 = document.getElementById("msg1").value;
                var patt1=/^[\u4E00-\u9FA5]{2,5}$/gi;
                var bluree1=patt1.test(msg1);
                if(bluree1==false){
                    msg11.innerHTML = '输入有误！';
                    document.getElementById("msg11").style.color="red";
                    e1=false;
                }else if(bluree1==true){
                    msg11.innerHTML = '输入合法！';
                    document.getElementById("msg11").style.color="green";
                    e1=true;
                }
                return e1;
             }
            function bluree2(){
                var msg2 = document.getElementById("msg2").value;
                var patt2=/^[1][3,4,5,7,8][0-9]{9}$/;
                var bluree2=patt2.test(msg2);
                if(bluree2==false){
                    msg21.innerHTML = '输入有误！';
                    document.getElementById("msg21").style.color="red";
                    e2=false;
                }else if(bluree2==true){
                    msg21.innerHTML = '输入合法！';
                    document.getElementById("msg21").style.color="green";
                    e2=true;
                }
                return e2;
             }
             function bluree3(){
                var msg3 = document.getElementById("msg3").value;
                var patt3=/^[0-9]{4}$/;
                var bluree3=patt3.test(msg3);
                if(bluree3==false){
                    msg31.innerHTML = '区号有误！';
                    document.getElementById("msg31").style.color="red";
                    e3=false;
                }else if(bluree3==true){
                    msg31.innerHTML = '区号合法！';
                    document.getElementById("msg31").style.color="green";
                    e3=true;
                }
                return e3;
               }
            function bluree4(){
                var msg4 = document.getElementById("msg4").value;
                var patt4=/^[0-9]{8}$/;
                var bluree4=patt4.test(msg4);
                if(bluree4==false){
                    msg41.innerHTML = '电话号码有误！';
                    document.getElementById("msg41").style.color="red";
                    e4=false;
                }else if(bluree4==true){
                    msg41.innerHTML = '电话号码合法！';
                    document.getElementById("msg41").style.color="green";
                    e4=true;
                }
                return e4;
            }
            function bluree5(){
                var msg5 = document.getElementById("msg5").value;
                var patt5=/^[0-9]{4}/;
                var bluree5=patt5.test(msg5);
                if(bluree5==false){
                    msg51.innerHTML = '分机有误！';
                    document.getElementById("msg51").style.color="red";
                    e5=false;
                }else if(bluree5==true){
                    msg51.innerHTML = '分机合法！';
                    document.getElementById("msg51").style.color="green";
                    e5=true;
                }
                return e5;
            }
            function bluree6(){
                var msg6 = document.getElementById("msg6").value;
                var patt6=/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
                var bluree6=patt6.test(msg6);
                if(bluree6==false){
                    msg61.innerHTML = '输入有误！';
                    document.getElementById("msg61").style.color="red";
                    e6=false;
                }else if(bluree6==true){
                    msg61.innerHTML = '输入合法！';
                    document.getElementById("msg61").style.color="green";
                    e6=true;
                }
                return e6;
            }
            function bluree7(){
                var msg7 = document.getElementById("msg7").value;
                var patt7=/^[0-9]{4}$/;
                var bluree7=patt7.test(msg7);
                if(bluree7==false){
                    msg71.innerHTML = '区号有误！';
                    document.getElementById("msg71").style.color="red";
                    e7=false;
                }else if(bluree7==true){
                    msg71.innerHTML = '区号合法！';
                    document.getElementById("msg71").style.color="green";
                    e7=true;
                }
                return e7;
    
               }
            function bluree8(){
                var msg8 = document.getElementById("msg8").value;
                var patt8=/^[0-9]{8}$/;
                var bluree8=patt8.test(msg8);
                if(bluree8==false){
                    msg81.innerHTML = '电话号码有误！';
                    document.getElementById("msg81").style.color="red";
                    e8=false;
                }else if(bluree8==true){
                    msg81.innerHTML = '电话号码合法！';
                    document.getElementById("msg81").style.color="green";
                    e8=true;
                }
                return e8;
            }
            function bluree9(){
                var msg9 = document.getElementById("msg9").value;
                var patt9=/^[0-9]{4}/;
                var bluree9=patt9.test(msg9);
                if(bluree9==false){
                    msg91.innerHTML = '分机有误！';
                    document.getElementById("msg91").style.color="red";
                    e9=false;
                }else if(bluree9==true){
                    msg91.innerHTML = '分机合法！';
                    document.getElementById("msg91").style.color="green";
                    e9=true;
                }
                return e9;
            }
        </script>
    
    <body>
    </body>
    </html>
    
</body>
</html>